<template>
  <div>
    <div class="info">
      <div>
        <el-row :gutter="24">
          <el-col :span="6">下单时间：</el-col>
          <el-col :span="12">
            <div>{{form.orderDt}}</div>
          </el-col>
        </el-row>
        <el-row :gutter="24" v-if="form.payDt">
          <el-col :span="6">支付时间：</el-col>
          <el-col :span="12">
            <div>{{form.payDt}}</div>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="6">订单ID:</el-col>
          <el-col :span="18">
            <div>{{orderNo}}</div>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="6">商户名称:</el-col>
          <el-col :span="12">
            <div>{{form.companyName}}</div>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="6">油站名称:</el-col>
          <el-col :span="12">
            <div>{{form.gasName}}</div>
          </el-col>
        </el-row>
         <el-row :gutter="24">
          <el-col :span="6">套餐包名称:</el-col>
          <el-col :span="12">
           <div>{{form.packageName}}</div>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="6">原价(元):</el-col>
          <el-col :span="12">
            <div>{{form.priceOrigin}}</div>
          </el-col>
        </el-row> 
        <el-row :gutter="24">
          <el-col :span="6">售价(元):</el-col>
          <el-col :span="12">
            <div>{{form.priceSale}}</div>
          </el-col>
        </el-row> 
        <el-row :gutter="24" v-if="form.markFundPay">
          <el-col :span="6">营销基金(元):</el-col>
          <el-col :span="12">
            <div>{{form.markFundPay}}</div>
          </el-col>
        </el-row> 
        <el-row :gutter="24">
          <el-col :span="6">订单金额(元):</el-col>
          <el-col :span="12">
            <div>{{form.amountPay}}</div>
          </el-col>
        </el-row> 
        <el-row :gutter="24">
          <el-col :span="6">订单状态:</el-col>
          <el-col :span="12">
            <div>{{form.orderStatusDesc}}</div>
          </el-col>
        </el-row>
        <el-row :gutter="24" v-if="form.payTypeDesc">
          <el-col :span="6">购买方式:</el-col>
          <el-col :span="12">
            <div>{{form.payTypeDesc}}</div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="pack-title">套餐包详情</div>
    <div class="pack-table">
       <el-table :data="form.interestList" border style="width: 100%"  max-height="250">
        <el-table-column align="center" prop="interestName" label="权益名称"></el-table-column>
        <el-table-column align="center" prop="num" label="权益数量"></el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { getOrderInfo } from  '@/api/market'
export default {
  props:{
    orderNo: {
      type: String,
      orderNo: () => ''
    },
  },
  data () {
    return {
      form: {},
    }
  },
  mounted () {
    this.getOrderInfoApi(this.orderNo)
  },
  methods: {
    // 获取订单详情接口
    async getOrderInfoApi (orderNo) {
      try {
        const { code, result = {} } = await getOrderInfo({ orderNo })
        if (code !== 200) return
        const { orderDt, payDt, id, companyName, gasName, packageName, amountPay, orderStatusDesc, payTypeDesc, interestList, priceOrigin, markFundPay, priceSale } = result
        const obj = { orderDt, payDt, id, companyName, gasName, packageName, amountPay, orderStatusDesc, payTypeDesc, interestList, priceOrigin, markFundPay, priceSale }
        this.form = obj
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>
<style scoped lang="less">
.info {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  >div{
    width: 80%;
  }
}
.el-row {
  margin-top: 20px;
  >.el-col:nth-child(2) {
    color: #222222;
    font-weight: blod;
    font-size: 16px;
  }
}
.pack-title{
  padding: 20px 0 10px 50px;
  font-size: 16px;
  color: #222;
}
.pack-table{
  padding: 0 50px;
}
</style>